<template><!--      template，可以包裹元素，最终不生成真实的DOm元素-->

  <div class="container" >

    <Category title="游戏">
      <template scope="atguigu">
        <ul>
          <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏" >
      <template  scope="atguigu">
        <ol>
          <li style="color: red" v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category>
    <Category title="游戏" >
      <template scope="{games}">

          <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>

      </template>

    </Category>

	</div>
</template>

<script>
import Category from "@/components/Category";
	export default {
		name:'App',
		components:{Category},

	}
</script>

<style lang="css">
/*居中两边分散均匀*/
.container,.foot{
  display: flex;
  justify-content: space-around;
}
img{
  width: 200px;
  height: 100px;
}

</style>